<template>
  <div class="piePie-box">
    <ul class="piePie">
      <li
        v-for="(item, index) of dataList"
        :key="index"
      >
        <h3 class="locationTitle iconfont">{{item.title}}</h3>
        <ul>
          <li>
            <pie
              :data="item.data[0].data"
              :title="item.data[0].title"
              :color="color"
              :pieSize="pieSize"
              :legendShow="false"
            >
            </pie>
          </li>
          <li>
            <pie
              :data="item.data[1].data"
              :title="item.data[1].title"
              :color="color"
              :pieSize="pieSize"
              :legendShow="false"
            >
            </pie>
          </li>
          <li>
            <pie
              :data="item.data[2].data"
              :title="item.data[2].title"
              :color="color"
              :pieSize="pieSize"
              :legendShow="false"
            >
            </pie>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import Pie from '@/common/echarts/Pie'
export default {
  name: 'PiePie',
  components: {
    Pie
  },
  props: {
    'dataList': {
      type: Array,
      default () {
        return [
          {
            title: '榆林市',
            data: [
              {
                title: '2018-06月',
                data: [
                  {value: 0, name: '偏轻'},
                  {value: 0, name: '均值'},
                  {value: 0, name: '肥胖'},
                  {value: 0, name: '超重'}
                ]
              },
              {
                title: '2018-07月',
                data: [
                  {value: 0, name: '偏轻'},
                  {value: 0, name: '均值'},
                  {value: 0, name: '肥胖'},
                  {value: 0, name: '超重'}
                ]
              },
              {
                title: '2018-08月',
                data: [
                  {value: 0, name: '偏轻'},
                  {value: 0, name: '均值'},
                  {value: 0, name: '肥胖'},
                  {value: 0, name: '超重'}
                ]
              }
            ]
          },
          {
            title: '商洛市',
            data:
            [
              {
                title: '2018-06月',
                data: [
                  {value: 0, name: '偏轻'},
                  {value: 0, name: '均值'},
                  {value: 0, name: '肥胖'},
                  {value: 0, name: '超重'}
                ]
              },
              {
                title: '2018-07月',
                data: [
                  {value: 0, name: '偏轻'},
                  {value: 0, name: '均值'},
                  {value: 0, name: '肥胖'},
                  {value: 0, name: '超重'}
                ]
              },
              {
                title: '2018-08月',
                data: [
                  {value: 0, name: '偏轻'},
                  {value: 0, name: '均值'},
                  {value: 0, name: '肥胖'},
                  {value: 0, name: '超重'}
                ]
              }
            ]
          }
        ]
      }
    }
  },
  data () {
    return {
      color: ['#315bff', '#7193ff', '#53e9ee', '#ffe98f', '#7343ff'],
      pieSize: {
        radius: ['0%', '55%'],
        center: ['50%', '45%'],
        title: {
          top: 0,
          fontSize: 14
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.piePie-box
  width: 100%
  .piePie
    width: 100%
    li
      width: 100%
      ul
        width: 100%
        overflow: hidden
        li
          height: 160px
          width: 33.3%
          float: left
          margin-top: 10px
</style>
